<template>
	<view class="">
		<!-- :maskClick="false" -->
		<uni-popup ref="popup" type="bottom" :show="popupShow" @change="unipopupFun">
			<view class="content column">
				<view class="iconfont iconguanbi skuIconfont" @click="close"></view>
				<!-- <text class="" @click="close"></text> -->
				<view class="pro-info row">
					<image class="pic" v-if="currentSku.productThumbnailImageUrl" :src="imgSrc + currentSku.productThumbnailImageUrl" mode="aspectFill"></image>
					<image class="pic" v-else :src="imgSrc + imgNoUrl" mode="aspectFill"></image>
					<view class="right column" v-if="type !== 'group'">
						<text class="price" v-if="type !== 'preSale' && preSaleFlag != '1' ">￥{{ currentSku.discountPrice || productPrice|moneyFormat(productPrice) || 0 }}</text>
						<text class="price" v-if="(type === 'preSale' || preSaleFlag == '1')&&preSaleType!==1&&!currentSku.suitId">定金￥{{ depositPrice|moneyFormat(depositPrice)||0 }}</text>
						<text class="price" v-if="(type === 'preSale' || preSaleFlag == '1')&&preSaleType===1&&!currentSku.suitId">￥{{ depositPrice|moneyFormat(depositPrice)||0 }}</text>
						<text class="stock" v-if="(type === 'preSale' || preSaleFlag == '1')&&!currentSku.suitId">到手价￥{{ productPrice|moneyFormat(productPrice)||0 }}</text>
						<text class="price" v-if="(type === 'preSale' || preSaleFlag == '1')&&currentSku.suitId">￥{{ currentSku.discountPrice || productPrice || 0 }}</text>
					</view>
					<view class="right column" v-if="type === 'group'">
						<text class="price" v-if="type === 'group'">￥{{ productLevelPrice || 0 }}</text>
					</view>
				</view>
				<view class="number-wrap row">
					<text class="s-tit fill">数量</text>
					<tui-numberbox :value="buyNumber" :min="presaleNum || 1" :max="currentSku.virtualInventory || 999" @change="onNumberChange"></tui-numberbox>
				</view>
				<!-- 规格 -->
				<scroll-view class="c-wrap" scroll-y="true">
					<view class="sku-list fill">
						<view v-if="skuList.length > 1">
							<text class="s-tit">请选择规格</text>
							<!-- 规格值 -->
							<view class="attrs">
								<view
									class="attr round center"
									v-for="(aItem, aIndex) in skuList"
									:class="{ active: currentSku.specificationId === aItem.specificationId, disabled: aItem.virtualInventory <= 0 }"
									:key="aIndex"
									@click="chooseAttr(aItem)"
								>
									<text>{{ aItem.specificationName }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="btn-wrap row">
					<view v-if="type === 'cart' || type === 'buy' || type === 'preSale' || type === 'group'" class="confirm-btn center" @click="confirm(type)">
						<text>确认</text>
					</view>
					<view v-else class="sm row">
						<view class="btn center" @click="confirm('cart')" v-if="preSaleFlag != '1'"><text>加入购物车</text></view>
						<view class="btn center" @click="confirm('buy')"><text>立即购买</text></view>
					</view>
				</view>
			</view>
		</uni-popup>
		<loading></loading>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import tuiNumberbox from '@/components/numberbox/numberbox';
export default {
	components: {
		tuiNumberbox,
		uniPopup
	},
	data() {
		return {
			imgSrc: '',
			// type: '', //cart加入购物车 buy立即购买
			buyNumber: this.presaleNum||1,
			specList: [], //规格
			currentSku: {}
		};
	},
	props: {
		popupShow: {
			type: Boolean,
			default: false
		},
		type: {
			type: String
		},
		bargainId: {
			type: String
		},
		preSaleFlag: {
			type: String
		},
		productPrice: {
			type: Number
		},
		depositPrice: {
			type: String
		},
		skuList: {
			type: Array
		},
		imgNoUrl: {
			type: String
		},
		cartNum: {
			type: Number
		},
		productLevelPrice: {
			type: Number
		},
		presaleNum: {
			type: Number
		},
		preSaleType: {
			type: Number,
			default: 0
		},
		specificationId: {
			type: String,
			default:'0'
		},
		preSaleTimeType: {
			type: String
		},
	},
	watch: {
		skuList(val) {
			console.log(this.currentSku);
			if (val) {
				console.log(val);
				// this.currentSku=val[0]
				if (val.length <= 1) {
					this.currentSku = val[0];
				} else {
					// debugger
					if(this.specificationId){
						val.forEach(item=>{
							if(item.specificationId==this.specificationId){
								this.currentSku =item
							}
						})
					}else{
						this.currentSku = {};
					}
					
				}
				console.log(this.currentSku);
			}
		},
		// specificationId(val){
		// 	if (val) {
		// 		debugger
		// 		this.skuList.forEach(item=>{
		// 			if(val==item.specificationId){
		// 				this.currentSku =item
		// 			}
		// 		})
		// 	}
		// },
		presaleNum(val){
			if (val) {
				console.log(val);
				this.buyNumber= this.presaleNum||1
			}
		}
	},
	mounted() {
		this.buyNumber= this.presaleNum||1
	},
	created() {
		console.log(this.skuList);
		if (this.skuList.length <= 1) {
			return;
		}
		this.skuList = this.skuList.map(item => {
			item.disabled = false;
			item.checked = false;
			if (item.virtualInventory <= 0) {
				item.disabled = true;
			}
			return item;
		});
		console.log(this.skuList);
	},
	filters:{
		moneyFormat(num) {
			var result = parseFloat(num);
			result = Math.round(num * 100) / 100;
			var s_x = result.toString();
			var pos_decimal = s_x.indexOf('.');
			if (pos_decimal < 0) {
				pos_decimal = s_x.length;
				s_x += '.';
			}
			while (s_x.length <= pos_decimal + 2) {
				s_x += '0';
			}
			return s_x;
		},
	},
	methods: {
		unipopupFun(e) {
			if (!e.show) {
				this.$emit('closeFun');
			}
		},
		// 结算
		confirm(type) {
			console.log(this.currentSku);
			if (this.currentSku.specificationId) {
				if ((this.currentSku.virtualInventory <= 0 || this.currentSku.virtualInventory == null) && !this.currentSku.suitId) {
					uni.showToast({
						title: '该规格的商品已售罄',
						icon: 'none'
					});
				} else {
					if (type === 'cart') {
						this.addToCart();
					} else {
						this.buyNew();
					}
				}
			} else {
				uni.showToast({
					title: '请选择规格',
					icon: 'none'
				});
			}
		},
		addToCart() {
			if((this.type === 'preSale' || this.preSaleFlag == '1')&&!this.currentSku.suitId){
					uni.showToast({
						title: '该预售商品不可以加入购物车',
						icon: 'none'
					});
					return
			}
			if (this.cartNum >= 100) {
				uni.showToast({
					title: '购物车上限100件商品，请移除部分商品后再添加',
					icon: 'none'
				});
				// this.close()
			} else {
				let params = {};
				if (this.currentSku.suitId) {
					if (this.currentSku.isShoppingCart == 0) {
						uni.showToast({
							title: '该规格不能加入购物车',
							icon: 'none'
						});
						return;
					} else {
						params = {
							addInfo: [
								{
									suitId: this.currentSku.suitId, //套餐id
									// productSpecificationId:'1001001001',
									orderCount: this.buyNumber
								}
							]
						};
					}
				} else {
					params = {
						addInfo: [
							{
								suitId: '', //套餐id
								productSpecificationId: this.currentSku.specificationId,
								// productSpecificationId:'1001001001',
								orderCount: this.buyNumber
							}
						]
					};
				}

				console.log(params);
				this.$http.buyItemUpdate(params).then(res => {
					if (res.status === 0) {
						console.log(res.data);
						// this.goodData=res.data
						// this.evaluateData=res.data
						uni.showToast({
							title:'添加成功',
						});
						// this.popupShow=false
						this.$eventHub.$emit('shopcartRefresh');
						this.$emit('addToCart', this.currentSku);
					}
				});
			}
		},
		buyNew() {
			if((this.type === 'preSale' || this.preSaleFlag == '1')&&!this.currentSku.suitId){
				if(this.preSaleTimeType=='1'){
					uni.showToast({
						title: '该预售商品未开始',
						icon: 'none'
					});
					return
				}
				if(this.preSaleTimeType=='2'){
					uni.showToast({
						title: '该预售商品已结束',
						icon: 'none'
					});
					return
				}
			}
			
			if (this.preSaleFlag == '1') {
				if (this.currentSku.suitId) {
					var goodsList = {
						suitId: this.currentSku.suitId,
						productsCount: this.buyNumber,
						preSaleOrderStatus: 1
					};
				} else {
					var goodsList = {
						specificationId: this.currentSku.specificationId,
						productsCount: this.buyNumber,
						preSaleOrderStatus: 1
					};
				}
			} else {
				if (this.currentSku.suitId) {
					if (this.currentSku.activityType === 1) {
						//满赠活动
						var goodsList = {
							fgId: this.currentSku.activityId,
							suitId: this.currentSku.suitId,
							productsCount: this.buyNumber
						};
					} else if (this.currentSku.activityType === 2) {
						//满减活动
						var goodsList = {
							offId: this.currentSku.activityId,
							suitId: this.currentSku.suitId,
							productsCount: this.buyNumber
						};
					} else if (this.currentSku.activityType === 3) {
						//买赠活动
						var goodsList = {
							activityGiveId: this.currentSku.activityId,
							suitId: this.currentSku.suitId,
							productsCount: this.buyNumber
						};
					} else if (this.currentSku.activityType === 4) {
						//满几半价活动
						var goodsList = {
							promotionDiscountId: this.currentSku.activityId,
							suitId: this.currentSku.suitId,
							productsCount: this.buyNumber
						};
					} else if (this.currentSku.activityType === 5) {
						//满折活动
						var goodsList = {
							activityId: this.currentSku.activityId,
							suitId: this.currentSku.suitId,
							productsCount: this.buyNumber
						};
					} else {
						var goodsList = {
							suitId: this.currentSku.suitId,
							productsCount: this.buyNumber
						};
					}
					
				} else {
					if (this.type === 'group') {
						var goodsList = {
							specificationId: this.currentSku.specificationId,
							productsCount: this.buyNumber,
							orderType: 2,
							bargainId: this.bargainId
						};
					} else if (this.currentSku.activityType === 1) {
						//满赠活动
						var goodsList = {
							fgId: this.currentSku.activityId,
							specificationId: this.currentSku.specificationId,
							productsCount: this.buyNumber
						};
					} else if (this.currentSku.activityType === 2) {
						//满减活动
						var goodsList = {
							offId: this.currentSku.activityId,
							specificationId: this.currentSku.specificationId,
							productsCount: this.buyNumber
						};
					} else if (this.currentSku.activityType === 3) {
						//买赠活动
						var goodsList = {
							activityGiveId: this.currentSku.activityId,
							specificationId: this.currentSku.specificationId,
							productsCount: this.buyNumber
						};
					} else if (this.currentSku.activityType === 4) {
						//满几半价活动
						var goodsList = {
							promotionDiscountId: this.currentSku.activityId,
							specificationId: this.currentSku.specificationId,
							productsCount: this.buyNumber
						};
					} else if (this.currentSku.activityType === 5) {
						//满折活动
						var goodsList = {
							activityId: this.currentSku.activityId,
							specificationId: this.currentSku.specificationId,
							productsCount: this.buyNumber
						};
					} else {
						var goodsList = {
							specificationId: this.currentSku.specificationId,
							productsCount: this.buyNumber
						};
					}
				}
			}

			var goodsListArr = [];
			goodsListArr.push(goodsList);
			uni.setStorageSync('carGoodsList', goodsListArr);
			uni.navigateTo({
				url: '/packageA/pages/submitOrder/submitOrder'
			});
		},
		//选择规格值
		chooseAttr(item) {
			console.log(item);
			if (item.virtualInventory <= 0) {
				return;
			} else if (item.specificationId === this.currentSku.specificationId) {
				this.currentSku = {};
				return;
			} else {
				this.skuList.forEach(attr => {
					if (attr.specificationId === item.specificationId) {
						this.currentSku = attr;
						if(attr.virtualInventory<this.buyNumber){
							this.buyNumber=attr.virtualInventory
						}
					}
				});

				this.$emit('chooseAttr', this.currentSku);
				console.log(this.skuList);
			}
		},
		//修改数量
		onNumberChange(e) {
			this.buyNumber = e.value;
		},
		open(type) {
			this.type = typeof type === 'string' ? type : '';
			console.log('hdsgkfdhsjkgfdhskfgdsjk');
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
			this.$emit('closeFun');
		}
	}
};
</script>

<style scoped lang="scss">
.iconfontAddress {
	display: flex;
	justify-content: right;
	text-align: right;
}
.content {
	// width: 750rpx;
	background-color: #fff;
	// padding: 20rpx;
	border-radius: 20rpx 20rpx 0 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	position: relative;

	.iconfont {
		text-align: right;
	}
}
.icon-guanbi {
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	padding: 20rpx;
	font-size: 32rpx;
	color: #999;
}
.pro-info {
	padding: 10rpx 32rpx 16rpx;

	.pic {
		flex-shrink: 0;
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx;
	}
	.price {
		padding-top: 10rpx;
		margin-bottom: 26rpx;
		font-size: 34rpx;
		color: #e04b28;
		font-weight: 700;
	}
	.stock {
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #999;
	}
	.attr-wrap {
		flex-wrap: wrap;

		text {
			line-height: 1.4;
			font-size: 24rpx;
			color: #333;
		}
		.attr {
			flex-shrink: 0;
			margin-right: 10rpx;
			color: #999;

			&.checked {
				color: #333;
			}
		}
	}
}
.s-tit {
	margin-left: 42rpx;
	font-size: 30rpx;
	color: #333;
	font-weight: 700;
	line-height: 90rpx;
}
.c-wrap {
	border-top: 2rpx solid #f7f7f7;
	min-height: 20vh;
	max-height: 60vh;
}
.sku-list {
	.attrs {
		display: flex;
		flex-wrap: wrap;
		padding-left: 32rpx;
		padding-right: 20rpx;
	}
	.attr {
		min-width: 58rpx;
		height: 58rpx;
		padding: 0 24rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #333;

		&:after {
			border-color: #e0e0e0;
		}
		&.active {
			color: #e04b28;
			background-color: rgba(255, 82, 111, 0.03);

			&:after {
				border-color: rgba(255, 82, 111, 0.5);
			}
		}
		&.disabled {
			background-color: #f7f7f7;
			border-color: #f7f7f7;
			color: #c2c2c2;
			text-decoration: line-through;
		}
	}
}

.number-wrap {
	padding-right: 40rpx;
}
.btn-wrap {
	align-items: flex-end;
	justify-content: center;
	padding: 36rpx 0 30rpx;
}
.confirm-btn {
	width: 670rpx;
	height: 84rpx;
	background-color: #e04b28;
	font-size: 32rpx;
	color: #fff;
	border-radius: 100rpx;
}
.sm {
	width: 670rpx;
	margin: 0 auto;

	.btn {
		flex: 1;
		height: 75rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: orange;
		border-radius: 100rpx;

		&:last-child {
			background-color: #e04b28;
			border-radius: 100rpx;
			margin-left: 20rpx;
		}
	}
}
</style>
